<template>
    <section class="record">
        <div class="heading">
            <h1>旅行记录</h1>
        </div>

        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="item in galleryValue">
                    <div class="image">
                        <img :src="item.url">
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<script setup>
import Swiper from 'swiper';
import 'swiper/css';
import { onMounted, reactive, ref } from 'vue';
import { recommendGalleryAPI } from '@/api'

const initSwiper = () => {
    let swiper = new Swiper(".mySwiper", {
        slidesPerView: 1,
        loop: true,
        speed: 500,
        autoplay: {
            delay: 2000,
            disableOnInteraction: false,
        },

        breakpoints: {
            "@0.00": {
                slidesPerView: 1,
                spaceBetween: 20,
            },
            "@0.75": {
                slidesPerView: 2,
                spaceBetween: 30,
            },
            "@1.00": {
                slidesPerView: 3,
                spaceBetween: 30,
            },
            "@1.50": {
                slidesPerView: 4,
                spaceBetween: 30,
            },
        },
    });
}
onMounted(() => {
    initSwiper()
    initgallery()
})
const ListDto = reactive({
    pageSize: 10,
    pageNum: 1,
    status: 0,
})

let galleryValue = ref()
const initgallery = async () => {
    const res = await recommendGalleryAPI(ListDto)
    galleryValue.value = res
}
</script>

<style lang="scss" scoped>
.record {
    position: relative;
    width: 100%;
    padding: 3rem 9%;
}

.heading {
    text-align: center;
    margin-bottom: 2rem;

    h1 {
        font-size: 4rem;
        margin-top: .5rem;
    }
}

.swiper-slide {
    width: 35rem;
    border: 1px solid #333;
}

.swiper-slide .image {
    position: relative;
    overflow: hidden;
    height: 40rem;
    width: 100%;
}

.image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
</style>